<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客服</title>
    <link rel="stylesheet" href="static/css/style.css">
</head>
<script>
    var token = getCookie("JWT_TOKEN");
    let strings = token.split("."); //截取token，获取载体
    var userinfo = JSON.parse(decodeURIComponent(escape(window.atob(strings[1].replace(/-/g, "+").replace(/_/g, "/")))));
    var userid = userinfo.userId;
    var to = getUrlParam("to");
    var socket;
    // var url = window.location.pathname
    // var para = window.location.search;
    // var hostname = window.location.hostname;
    var ws = "ws://localhost:8888/ws?from="+userid;
    //判断当前浏览器是否支持websocket
    if(window.WebSocket){
        socket = new WebSocket(ws);
        //相当与channelRead0，ev收到服务器端收到回送的消息
        socket.onmessage = function (ev) {
            var rt = document.getElementById("show");
            rt.value = rt.value+"\n"+ev.data;
        }
        //相当于连接开启（感知到）
        socket.onopen = function (ev) {
            var rt = document.getElementById("show");
            rt.value = "连接开启";
        }
        //相当于连接关闭
        socket.onclose = function (ev) {
            var rt = document.getElementById("show");
            rt.value = rt.value+"\n"+"连接关闭了"
        }
    }else{
        alert("当前浏览器不支持websocket")
    }
    //发送消息到服务器
    function send(message) {
        //先判断websocket是否创建好了
        if(!window.socket){
            return;
        }
        if(socket.readyState == WebSocket.OPEN){
            //通过socket发送消息
            var show = document.getElementById("show");
            var input = document.getElementById("input")
            show.value = show.value+"\n"+"我:"+input.value;
            socket.send(userid+":"+to+":"+message);
        }else{
            alert("连接没有开启")
        }
    }
    function getCookie(cookie_name) {
        var allcookies = document.cookie;
        var cookie_pos = allcookies.indexOf(cookie_name);
        if (cookie_pos != -1) {
            cookie_pos = cookie_pos + cookie_name.length + 1;
            var cookie_end = allcookies.indexOf(";", cookie_pos);
            if (cookie_end == -1) {
                cookie_end = allcookies.length;
            }
            var value = unescape(allcookies.substring(cookie_pos, cookie_end));
        }
        return value;
    }
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURIComponent(r[2]);
        }
        return '';
    }
</script>
<body>
<div class="导航0">
    <div class="导航1">
        <div class="导航2">
            <a th:href="@{/toIndex}" th:if="${username}!=null">胖墩服装店首页</a>
            <a th:href="@{/}" th:if="${username}==null">胖墩服装店首页</a><span>|</span>
            <a href="">购物记录</a><span>|</span>
            <a href="/toChat?to=2">客服</a><span>|</span>
            <a href="">待用</a><span>|</span>
            <a href="">待用</a><span>|</span>
            <a href="">待用</a><span>|</span>
        </div>
        <div class="导航3">
            <a th:href="@{/toLogin}" th:if="${username}==null">登录/注册</a>
            <a th:href="@{/input}" th:if="${username}!=null" th:text="'尊敬的'+${username}+'你好'"></a><span>|</span>
            <a href="/logout">注销</a>
        </div>
        <div class="导航4"><a href="/input">开始购物<span>(0)</span></a></div>
    </div>
</div>
<form onsubmit="return false">
    <textarea name="input" id = "input" style="height: 300px; width: 300px"></textarea>
    <input type = button value="发送消息" onclick="send(this.form.input.value)">
    <textarea id="show" style="height: 300px; width: 300px"></textarea>
</form>
</body>
</html>